<template>
  <div class="accessories">
    <div class="tail-series">
      <h3>OBSBOT Tail Series</h3>
      <span>Product</span>
      <div class="tail-series-up">
        <div>
          <img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/fa26e204f13d48efb1c9.jpg" alt="">
        </div>
        <div class="tail-series-up-description">
          <a href="#"><img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/7b10e5d218274c61b743.png" alt=""></a>
          <div>
            <a href="#">OBSBOT Tail Air</a><br>
            <a href="#">USD $499.00</a>
          </div>
        </div>
      </div>
      <div class="tail-series-list">
        <h3 style="text-align: left">Accessories</h3>
        <ul v-if="accessoriesData !== null">
          <li v-for="(item, index) in (accessoriesData as any)" :key="index">
            <a href="#"><img :src="item.src" alt=""></a>
            <div>
              <a href="#">{{item.title}}</a><br>
              <a href="#">{{item.currency}} ${{item.price}}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="tiny-series">
      <div class="tiny-series-up">
        <h3>OBSBOT Tiny Series</h3>
        <span>Product</span>

        <div class="tail-series-up">
          <div>
            <img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/eff3f57a696c4abb9225.jpg" alt="">
          </div>
          <div class="tiny-series-list">
            <ul v-if="TinySeries !== null">
              <li v-for="(item, index) in (TinySeries as any)" :key="index">
                <div class="tail-series-up-description" style="margin-right: 100px">
                  <a href="#"><img :src="item.src" alt=""></a>
                  <div>
                    <a href="#">{{item.title}}</a><br>
                    <a href="#">{{item.currency}} ${{item.price}}</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="tail-series-list">
        <h3 style="text-align: left">Accessories</h3>
        <ul v-if="accessoriesData !== null">
          <li v-for="(item, index) in (accessoriesData as any)" :key="index">
            <a href="#"><img :src="item.src" alt=""></a>
            <div>
              <a href="#">{{item.title}}</a><br>
              <a href="#">{{item.currency}} ${{item.price}}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="tiny-series">
      <div class="tiny-series-up">
        <h3>OBSBOT Meet Series</h3>
        <span>Product</span>

        <div class="tail-series-up">
          <div>
            <img src="https://resource-cdn.obsbothk.com/product_system_back/product_img/794f527185874a6ca2cf.png" alt="">
          </div>
          <div class="tiny-series-list Meet-series">
            <ul v-if="MeetSeries !== null">
              <li v-for="(item, index) in (MeetSeries as any)" :key="index">
                <div class="tail-series-up-description" style="margin-right: 100px">
                  <a href="#"><img :src="item.src" alt=""></a>
                  <div>
                    <a href="#">{{item.title}}</a><br>
                    <a href="#">{{item.currency}} ${{item.price}}</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="tail-series-list">
        <h3 style="text-align: left">Accessories</h3>
        <ul v-if="accessoriesData !== null">
          <li v-for="(item, index) in (accessoriesData as any)" :key="index">
            <a href="#"><img :src="item.src" alt=""></a>
            <div>
              <a href="#">{{item.title}}</a><br>
              <a href="#">{{item.currency}} ${{item.price}}</a>
            </div>
          </li>
        </ul>
      </div>
    </div>



  </div>


  <Advantage/>
  <Footer/>
</template>

<script lang="ts">
import { getAccessories,getTinySeries,getTinySeries2 } from '@/api/api';

  export default {
    name: "Accessories",
    setup() {
      const data = reactive({
        accessoriesData: ref(null),
        TinySeries: ref(null),
        MeetSeries: ref(null)
      })

      getAccessories('').then((res: any) => {
        data.accessoriesData = res._rawValue.title
      }).catch((err: any) => {
        console.log(err + '请求失败')
      })

      getTinySeries('').then((res: any) => {
        data.TinySeries = res._rawValue
      }).catch((err: any) => {
        console.log(err + '请求失败')
      })

      getTinySeries2('').then((res: any) => {
        data.MeetSeries = res._rawValue
      }).catch((err: any) => {
        console.log(err + '请求失败')
      })

      return{
        ...toRefs(data)
      }
    }

}

</script>

<style scoped>

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: black;
}

h3 {
  font-weight: bold;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}


.accessories {
  height: auto;
  padding: 80px 80px;

}
.tail-series,
.tiny-series-up{
  margin-top: 150px;
  text-align: left;
  margin-bottom: 50px;
}

h3 {
  font-size: 30px;
}

 span {
  font-size: 15px;
  font-weight: bold;
  color: #000;
}

.tail-series-up {
  display: flex;
  justify-content: space-between;
  align-items: start;
  margin-top: 30px;
  transition: all 4s;
  margin-bottom: 100px;
}


.tail-series-up-description:hover {
  transform: translate(0, -2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
}

.tail-series-up a {
  text-decoration: none;
  color: black;
  font-size: 15px;
  font-weight: bold;
}

.tail-series-up-description {
  height: 338px;
  width: 300px;
  margin-right: 870px;
  text-align: center;
  line-height: 50px;
}

.tail-series-up-description img {
  height: 200px !important;
  margin-bottom: 10px;
  margin-left: 40px
}

.tail-series-up li {
  list-style: none;
}

.tail-series-up img {
  height: 340px;
  width: auto;
  border-radius: 5px;
  text-align: left;
}

.tail-series-list {
  text-align: center;
}

.tail-series-list h3 {
  font-size: 15px;
}

.tail-series-list img {
  height: 200px;
  text-align: center;
}



.tail-series-list ul {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  transition: opacity 4s linear;
}
.tail-series-list li {
  transition: all 0.5s;
}

.tail-series-list li {
  list-style: none;
  line-height: 40px;
  
}
.tail-series-list li:hover {
  transform: translate(0, -2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果，可以根据需要进行调整 */
}

.tail-series-list a {
  font-size: 13px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

.tiny-series-list {
  margin-left: 30px
}

.tiny-series-list ul {
  display: flex;
  justify-content: space-between;
  
}


.Meet-series {
  text-align: center;
  margin-right: 100px;
}


</style>